* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root{
  --text-color: white;
  --bg-url: url(./bg-mobile.jpg);
  --stroke-color: rgba(219, 219, 219, 0.1);
  --surface-color: rgba(204, 226, 252, 0.2);
  --surface-color-hover:  rgba(0, 0, 0, 0.2);
  --highlight-color:  rgba(31, 122, 226, 0.2);
  --switch-bg-url: url(./lua.svg);
}

.light{
  --text-color: black;
  --bg-url: url(./light.jpg);
  --stroke-color: rgba(91, 172, 238, 0.5);
  --surface-color: rgba(91, 172, 238, 0.5);
  --surface-color-hover:  rgba(0, 0, 0, 0.2);
  --highlight-color: rgba(91, 172, 238, 0.5);
  --switch-bg-url: url(./sol.svg);
}

body {
   
   background: var(--bg-url) no-repeat top center/cover;
   
}

body * {
  font-family: 'Helvetica';
  color: var(--text-color);
}
   #container {
       width: 360px;
       margin: 56px auto 0px;
       padding: 0 24px;
       

       }
       #profile {
        text-align: center;
        padding: 14px;
       
       
        
       }

       #profile img {
            width: 112px; 
            
       }

       #profile p {
         font-weight: 500;
         font-size: 16px;
         line-height: 24px;
         margin-top: 8px;
         }

         /*switch */
         #switch {
          width: 64px;
          position: relative;
         }
h2  {
  padding: 24px 0;
  text-align: center;
  font-size: 24px;
  
}
  a {
  text-decoration: none;
}

         #switch button {
           width: 32px;
           height: 32px;
           background: white var(--switch-bg-url) no-repeat center;
           border: 0;
           border-radius: 50%;

           position: absolute;
           top: 50%;
          left: 0;
           z-index: 1;
           transform: translatey(-50%);
          }

          .light #switch button {
            right: 0;
            left: initial;
          }

          #switch span{
           display: block;
           width: 64px;
           height: 24px;
           background: var(--surface-color);
           border: 1px solid var(--stroke-color);
           backdrop-filter: blur(4px);
           --webkit-backdrop-filter: blur(4px);
           border-radius: 999px;
          }

        
         

       /* links */
       ul {
         list-style: none;

         display: flex;
         flex-direction: column;
         gap: 16px;
         
        
       }
       ul li a {
         
         display: flex;
        align-items: center;
        justify-content: center;

     padding: 16px 24px;

    background: var(--surface-color);
    border: 1px solid var(stroke-color);
    border-radius: 8px;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    text-decoration: none;
    font-weight: 500;

    transition: background 0.2s;
       }

/* pseudo-selector */
ul li a:hover {
  background: var(--surface-color-hover);
    border: 1.5px solid var(--text-color);
         
       }
      
       /* social links */
       #social-links {
         display: flex;
         justify-content: center;
         
         
         padding: 24px 0;

         font-size: 24px;
        }

        #social-links a {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 16px;

          transition: background 0.2s;
          border-radius: 50%;
        }
        

      #social-links a:hover {
        background: var(--highlight-color);
      }
      
      footer {
        padding: 24px 0;
        text-align: center;
        font-size: 14px;
      }
     @media screen and (max-width: 580px){

            margin: -201px;
    list-style: ;
    display: none;
    gap: 0px;
    align-items: center;
    font-size: 12px;
     
    
     
  }